<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="css.css" />
		<style type="text/css">
			/*em{position:absolute;width: 10px;height: 10px; color: red}
		.Odiv{
			position: absolute;
			left: 670px;top: 660px;
		}*/
		</style>
		<title>demo</title>
	</head>

	<body>
		<div class="warp">
			<!--隐藏按钮-->
			<div class="hideBtn">
				<a id="hideNext" href="javascript:;"></a>
				<a id="hidePre" href="javascript:;"></a>
			</div>
			<div class="innerBtn">
				<!--按钮-->
				<a id="inerNext" class="next" href="javascript:;"></a>
				<a id="inerPre" class="pre" href="javascript:;"></a>
			</div>
			<div class="inner-left">
				<img src="images/iner-left-guanjianci.png" style="opacity: 1;top:90px" />
				<img src="images/iner-left-jieshou.png" />
				<img src="images/iner-left-leixing.png" />
				<img src="images/iner-left-tuisong.png" />
				<img src="images/iner-left-diqu.png" />
				<img src="images/iner-left-guanjianci.png" />
				<img src="images/iner-left-jieshou.png" />
				<img src="images/iner-left-leixing.png" />
				<img src="images/iner-left-tuisong.png" />
				<img src="images/iner-left-diqu.png" />
				<img src="images/iner-left-guanjianci.png" />
				<img src="images/iner-left-jieshou.png" />
				<img src="images/iner-left-leixing.png" />
				<img src="images/iner-left-tuisong.png" />
				<img src="images/iner-left-diqu.png" />
			</div>
			<div id="inner" class="inner">
				<ul>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-guanjianci.png" acTimg='images/inner-guanjianciActive.png' width="150" src="images/inner-guanjianciActive.png" />
						</div>
						<div class="fl frText" style="display: block;">
							<span><i>01</i>/05</span>
							<p>关键词订阅</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>

					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-jieshou.png" acTimg="images/inner-jieshouActive.png" width="150" src="images/inner-jieshou.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>接受</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>

					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-leixing.png" acTimg="images/inner-leixingActive.png" width="150" src="images/inner-leixing.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>类型</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-tuisong.png" acTimg="images/inner-tuisongActive.png" width="150" src="images/inner-tuisong.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>推送</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-diqu.png" acTimg="images/inner-diquActive.png" width="150" src="images/inner-diqu.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>地区</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-guanjianci.png" acTimg='images/inner-guanjianciActive.png' width="150" src="images/inner-guanjianci.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>关键词订阅</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>

					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-jieshou.png" acTimg="images/inner-jieshouActive.png" width="150" src="images/inner-jieshou.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>接受</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>

					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-leixing.png" acTimg="images/inner-leixingActive.png" width="150" src="images/inner-leixing.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>类型</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-tuisong.png" acTimg="images/inner-tuisongActive.png" width="150" src="images/inner-tuisong.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>推送</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-diqu.png" acTimg="images/inner-diquActive.png" width="150" src="images/inner-diqu.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>地区</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-guanjianci.png" acTimg='images/inner-guanjianciActive.png' width="150" src="images/inner-guanjianci.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>关键词订阅</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>

					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-jieshou.png" acTimg="images/inner-jieshouActive.png" width="150" src="images/inner-jieshou.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>接受</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>

					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-leixing.png" acTimg="images/inner-leixingActive.png" width="150" src="images/inner-leixing.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>类型</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-tuisong.png" acTimg="images/inner-tuisongActive.png" width="150" src="images/inner-tuisong.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>推送</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>
					<li>
						<div class="fl">
							<img class="icon" srcImg="images/inner-diqu.png" acTimg="images/inner-diquActive.png" width="150" src="images/inner-diqu.png" />
						</div>
						<div class="fl frText">
							<span><i>01</i>/05</span>
							<p>地区</p>
							<p>10组招标关键词自由订阅，不漏掉任何一个招标信息</p>
						</div>
					</li>

				</ul>
			</div>
		</div>
		<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			/*var showCircle = function() {
															        var PI = Math.PI;
															        return {
															            draw: function(r, _x, _y) {
															               
															                var x, y;
															                 var $inner = $('.inner');
															                 var Div = document.createElement('div');
															               	 Div.className = 'Odiv';
															                for(var i = 0; i < 360; i+=24) {
															                    x = Math.cos(PI / 180 * i) * r + _x;
															                    y = Math.sin(PI / 180 * i) * r + _y;                
															                    var O = document.createElement('em');
															                    O.appendChild(document.createTextNode('.'));
															                    O.style.left = x + 'px';
															                    O.style.top = y + 'px';
															                    Div.appendChild(O);
															                }        
															                
															                
															                $inner.append(Div);
															            }
															        }
															    }();
															    showCircle.draw(672, 0, 0);*/
			$(function() {
				var rotateInner = function() {
					var $pre = $('#inerPre'),
						$next = $('#inerNext'),
						$hideNext = $("#hideNext"),
						$hidePre = $("#hidePre"),
						$inner = $('#inner'),
						$ulLists = $('#inner ul li'),
						/*度数*/
						num = 0,
						/*索引*/
						index = null,
						/*圈数*/
						circle = null;

					return {

						next: function() {
							$next.on('click', function() {
								num = num + 24;
								setTimeout(rotateInner.nowActive, 0)

								$inner.css({
									"transform": "rotate(" + (-num) + "deg)"
								})
							});
							$hideNext.on('click', function() {
								num = num - 24;
								setTimeout(rotateInner.nowActive, 0)

								$inner.css({
									"transform": "rotate(" + (-num) + "deg)"
								})
							});
						},
						pre: function() {
							$pre.on('click', function() {
								num = num - 24;
								setTimeout(rotateInner.nowActive, 0)
								$inner.css({
									"transform": "rotate(" + (-num) + "deg)"
								})
							});
							$hidePre.on('click', function() {
								num = num + 24;
								setTimeout(rotateInner.nowActive, 0)
								$inner.css({
									"transform": "rotate(" + (-num) + "deg)"
								})
							})
						},
						nowActive: function() {
							/*获取圈数*/
							circle = Math.floor(num / 360);
							/*获取索引*/
							index = (num - circle * 360) / 24;
							/*左边图片*/
							var $leftImg = $('.inner-left img');

							/*active时的图片路径*/
							var imgSrc = $ulLists.eq(index).find(".icon").attr('acTimg');

							/*当前索引添加class*/
							$ulLists.eq(index).addClass("nowImg").siblings().removeClass('nowImg');
							
							$.each($ulLists, function(i) {
								if($($ulLists[i]).hasClass("nowImg")) {
									
									$($ulLists[i]).find(".icon").attr({
										"src": imgSrc
									}).removeClass("animteOpacity").addClass("animteOpacity")
								} else {
									/*原图片路径*/
									var imgSrc_src = $($ulLists[i]).find(".icon").attr('srcImg');
									
									$($ulLists[i]).find(".icon").attr({
										"src": imgSrc_src
									}).removeClass("animteOpacity");
									
								}
							});

							/*给当前索引的 数字添加类名 删除其他类名*/
							$ulLists.eq(index).find("i").addClass('active').end().siblings().find("i").removeClass('active');
							/*显示frText和隐藏*/
							$ulLists.eq(index).find(".frText").stop().fadeIn(500).end().siblings().find(".frText").stop().fadeOut(10);
							/*左边图片显示*/
							$leftImg.eq(index).stop().animate({
								"opacity": "1",
								"top": "90px"
							}, 1000).siblings().stop().css({
								"opacity": "0",
								"top": "400px"
							})
						},
						tigerClick: function() {
							var $innerBtn = $('.innerBtn').find('a');
							var $hideBtn = $(".hideBtn").find("a");
							
							/*设置定时器*/
							//t = setInterval(tirclick, 8000);
							/*var n = new Date().getTime();
							var id;

							function animloop() {
								id = requestAnimationFrame(animloop);
								var m = new Date().getTime();
								if(m - n >= 1000) {
									n = m;
									tirclick();
								}
							}*/
							/*var t = null;
							var $inerNext = $('#inerNext');
							var $inerPre = $('#inerPre');
							setClick();
							annimateEnd();
							$inner.on("mouseover",function(){
								clearSetTimeout();
							})
							$inerNext.on('mouseover', function() {
								clearSetTimeout();
							}).on('click',function(){
								clearSetTimeout()
							});
							$inerPre.on('mouseover', function() {
								clearSetTimeout();
							}).on('click',function(){
								clearSetTimeout()
							});
							$innerBtn.on('click',function(){
								
							});
							
							function setClick () {
								t = setTimeout(tirclick,1000);
							};
							function clearSetTimeout(){
								clearTimeout(t);
								$inner.on('transitionend',function(){
									clearTimeout(tirclick,1000);
								});
							};
							function annimateEnd () {
								$inner.on('transitionend',function(){
									t =setTimeout(tirclick,1000);
								})
							};
							function tirclick() {
								$next.trigger('click');
							};*/
							
							
							
							
							var $innerBtn = $('.innerBtn');
							/*设置定时器*/
							 t = setInterval(tirclick, 4000);
							//修改
							/*t = setTimeout(tirclick,2000)
							$inner.on('transitionend',function(){
								t =setTimeout(tirclick,2000)
							})*/
							 /*$inner.on('mouseover', function() {
							 	clearInterval(t)
							 });*/
							 $innerBtn.on('mouseover', function() {
							 	clearInterval(t)
							 });
							 $hideBtn.on('mouseover', function() {
							 	clearInterval(t)
							 });

							/* $inner.on('mouseout', function() {
							 	t = setInterval(tirclick, 4000);
							 });*/
							 $innerBtn.on('mouseout', function() {
							 	t = setInterval(tirclick, 4000);
							 });
							 $hideBtn.on('mouseout', function() {
							 	t = setInterval(tirclick, 4000);
							 });

							function tirclick() {
								$next.triggerHandler('click');
							}
							
							$(document).on('visibilitychange',function(){
								document.hidden?clearInterval(t) : t = setInterval(tirclick, 4000);
							})
						}
					}
				}()
				/*调用*/
				rotateInner.next()
				rotateInner.pre()

				rotateInner.tigerClick()
			})
		</script>
	</body>

</html>